import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { routerRedux, Link } from 'dva/router';
import {
  Form,
  Input,
  DatePicker,
  Select,
  Button,
  Card,
  InputNumber,
  Radio,
  Checkbox,
  Icon,
  Tooltip,
  message,
} from 'antd';
const RadioGroup = Radio.Group;
const CheckboxGroup = Checkbox.Group;

import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { formatMessage, FormattedMessage } from 'umi/locale';
import styles from './style.less';

const FormItem = Form.Item;
const { Option } = Select;
const { RangePicker } = DatePicker;
const { TextArea } = Input;

const timeOptions = [
  { label: '上午', value: 'morning' },
  { label: '下午', value: 'afternoon' },
  { label: '晚上', value: 'night' },
];

@connect(({ gameList, loading }) => ({
  gameList,
  submitting: loading.effects['gameList/addGame'],
}))
@Form.create()
export default class GameAddForm extends PureComponent {
  state = {
    isPublic: false,
    checkedValues: [],
  };

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        //console.log(values);

        values.status = 'NEW';
        values.startDate = values.gameDate[0];
        values.endDate = values.gameDate[1];

        values.signStartDate = values.signDate[0];
        values.signEndDate = values.signDate[1];

        delete values.gameDate;
        delete values.signDate;
        values.timePhase = values.timePhase.join(',');

        this.props.dispatch({
          type: 'gameList/addGame',
          payload: values,
          callback: () => {
            message.success('赛事添加成功');
            this.props.dispatch(
              routerRedux.push({
                pathname: '/badminton/list-play',
              })
            );
          },
        });
      }
    });
  };

  handlePublicChange = e => {
    this.setState({
      isPublic: e.target.value,
    });
  };

  disabledDate = current => {
    // Can not select days before today and today
    return current && current < moment().endOf('day');
  };

  checkChange = checkedValues => {
    console.log(checkedValues);
    this.setState({
      checkedValues,
    });
  };

  render() {
    const { submitting } = this.props;
    const { getFieldDecorator, getFieldValue } = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };

    return (
      <PageHeaderWrapper>
        <Card bordered={false}>
          <Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
            <FormItem {...formItemLayout} label="赛事名称">
              {getFieldDecorator('title', {
                rules: [
                  {
                    required: true,
                    message: '请输入赛事名称',
                  },
                ],
              })(<Input placeholder="赛事名称" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="举办单位">
              {getFieldDecorator('owner', {
                rules: [
                  {
                    required: true,
                    message: '请输入举办单位',
                  },
                ],
              })(<Input placeholder="赛事名称" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="联系电话">
              {getFieldDecorator('tel', {
                rules: [
                  {
                    required: true,
                    message: '请输入联系电话',
                  },
                ],
              })(<Input placeholder="联系电话" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="比赛地点">
              {getFieldDecorator('position', {
                rules: [
                  {
                    required: true,
                    message: '请输入比赛地点',
                  },
                ],
              })(<Input placeholder="比赛地点" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="场地数量">
              {getFieldDecorator('placeCount', {
                rules: [
                  {
                    required: true,
                    message: '请输入场地数量',
                  },
                ],
              })(<Input placeholder="场地数量" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="报名起止日期">
              {getFieldDecorator('signDate', {
                rules: [
                  {
                    required: true,
                    message: '请选择报名起止日期',
                  },
                ],
              })(
                <RangePicker
                  disabledDate={this.disabledDate()}
                  style={{ width: '100%' }}
                  placeholder={['开始日期', '结束日期']}
                />
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="比赛起止日期">
              {getFieldDecorator('gameDate', {
                rules: [
                  {
                    required: true,
                    message: '请选择赛事起止日期',
                  },
                ],
              })(
                <RangePicker
                  disabledDate={this.disabledDate()}
                  style={{ width: '100%' }}
                  placeholder={['开始日期', '结束日期']}
                />
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="比赛时段">
              {getFieldDecorator('timePhase', {
                rules: [{ required: true, message: '请选择比赛时段' }],
              })(<CheckboxGroup options={timeOptions} onChange={this.checkChange} />)}
            </FormItem>
            {this.state.checkedValues.map(item => (
              <FormItem
                key={item}
                {...formItemLayout}
                label={item === 'morning' ? '上午' : item === 'afternoon' ? '下午' : '晚上'}
              >
                {getFieldDecorator(item, {
                  rules: [{ required: true, message: '请输入比赛场数' }],
                })(<InputNumber min={1} max={100} formatter={value => `${value} 场`} />)}
              </FormItem>
            ))}
            <FormItem {...formItemLayout} label="赛事简介">
              {getFieldDecorator('gameDesc', {
                rules: [
                  {
                    required: true,
                    message: '请输入赛事简介',
                  },
                ],
              })(<TextArea style={{ minHeight: 32 }} placeholder="赛事简介" rows={4} />)}
            </FormItem>
            <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
              <Button type="primary" htmlType="submit" loading={submitting}>
                提交
              </Button>
              <Link to="/badminton/list-play">
                <Button style={{ marginLeft: 8 }}>取消</Button>
              </Link>
            </FormItem>
          </Form>
        </Card>
      </PageHeaderWrapper>
    );
  }
}
